<template>
  <div class="productIntroduce">
    <ContentTitle title="产品介绍"></ContentTitle>
    <div class="productIntroduce_content">
      <div class="content_item" v-for="(item,index) in imageList" :key="index">
        <img :src="item.url" alt="" />
        <div class="introduction">{{ item.introduction }}</div>
      </div>
    </div>
    <a name="ProductsNews"></a>
  </div>
</template>

<script>
import ContentTitle from "components/ContentTitle";

export default {
  name: "ProductIntroduce",
  data() {
    return {
      imageList: [
        {
          url:
            "https://bucketosscjh.oss-cn-shenzhen.aliyuncs.com/blueDream/ProductDisplayOne.png",
          introduction: "地球找房",
        },
        {
          url:"https://bucketosscjh.oss-cn-shenzhen.aliyuncs.com/blueDream/ProductDisplayTwo.png",
          introduction: "经纪人帮帮",
        },
        {
          url:
            
            "https://bucketosscjh.oss-cn-shenzhen.aliyuncs.com/blueDream/ProductDisplayThree.png",
          introduction: "渠道商助手",
        },
      ],
    };
  },
  components: {
    ContentTitle,
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="less" scoped>
.productIntroduce {
  height: 47.4rem;
  width: 100vw;
  background: rgba(255, 255, 255, 0.8);
  box-sizing: border-box;
  // padding: 3.4rem 41.6rem 0 41.6rem;
  padding-top: 3.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  .contentTitle {
    margin: 0 auto;
  }
  .productIntroduce_content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 108.8rem;
    // width: 100%;
    .content_item {
      flex-shrink: 0;
      width: 20rem;
      height: 25rem;
      text-align: center;
      margin-top: 4rem;
      img {
        width: 20rem;
        height: 20rem;
      }
      .introduction {
        margin-top: 4rem;
        font-size: 2.4rem;
        color: #595959;
      }
    }
  }
}
</style>
